import Vue from 'vue';
import Loading from './components/Loading.vue'

const LoadingComponent = new Vue({
    render: h => h(Loading)
});

Vue.directive('xhzq-loading', {
    bind: function (el, binding) {
        // 挂载到DOM元素
        LoadingComponent.$mount();
        el.appendChild(LoadingComponent.$el);
    },
    // 当被绑定的元素插入到 DOM 中时
    inserted: function (el, binding) {
        LoadingComponent.$el.style.display = binding.value ? 'block' : 'none';
    },
    // 当指令所在组件的 VNode 更新时调用
    update: function (el, binding) {
        // 根据传入的参数更新遮罩的显示状态
        LoadingComponent.$el.style.display = binding.value ? 'block' : 'none';
    },
    unbind: function (el, binding) {
        console.log(el, binding.value, 'unbind')
        if (LoadingComponent.$el) {
            LoadingComponent.$el.remove();
        }
    }
});


